<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>



    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    <script type="text/javascript">
     $(function () {
		$('#newNav').click(function(){
				window.location.href="addUser.html";
		 });
    });


    function checkall(){
			var alls=document.getElementsByName("check");
			var ch=document.getElementById("checkall");
			if(ch.checked){
				for(var i=0;i<alls.length;i++){
					alls[i].checked=true;
				}
			}else{
				for(var i=0;i<alls.length;i++){
					alls[i].checked=false;
				}
			}
		}
		function delAll(){
			var alls=document.getElementsByName("check");
			var ids=new Array();
			for(var i=0;i<alls.length;i++){
				if(alls[i].checked){
					ids.push(alls[i].value);
				}
			}
			if(ids.length>0){
				if(confirm("确认删除?")){
					alert("删除成功!");
				}
			}else{
				alert("请选中要删除的项");
			}
		}
    </script>
</head>
<body>
<form class="form-inline definewidth m20" action="index.html" method="get">
    用户名称：
    <input type="text" name="username" id="username"class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
    <button type="submit" class="btn btn-primary">查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>用户账户</th>
        <th>真实姓名</th>
        <th>角色</th>
        <th  width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tboby">
	     <tr>
         	<td style="vertical-align:middle;">
                <input type="checkbox" name="check" value="1"></td>
            <td>admin</td>
            <td>管理员</td>
            <td>管理员</td>
            <td>
                <a href="editUser.html">编辑</a>&nbsp;&nbsp;&nbsp;<a href="javascript:alert('删除成功！');">删除</a>
            </td>
        </tr>
    </tbody>
</table>
<table class="table table-bordered table-hover definewidth m10" >
  	<tr>
        <th colspan="5">
            <div class="inline pull-right page">
                <span id="total"></span>条记录 <span id="pageNum"></span>/<span id="pages"></span> 页

<!--                <a href='#'>下一页</a>-->
<!--            <span class='current'>1</span>-->
<!--            <a href='#'>2</a>-->
<!--            <a href='/chinapost/index.php?m=Label&a=index&p=3'>3</a>-->
<!--            <a href='#'>4</a>-->
<!--            <a href='#'>5</a>-->
<!--            <a href='#' >下5页</a>-->
<!--            <a href='#' >最后一页</a>0-->

                <span name="pageLi" id="firstPage"><a href="javascript:void(0)">首页</a></>
                <span name="pageLi" id="prePage"><a href="javascript:void(0)">上一页</a></span>
                <span name="pageLi" id="nextPage"><a href="javascript:void(0)">下一页</a></span>
                <span name="pageLi" id="lastPage"><a href="javascript:void(0)">末页</a></span>
            </div>
            <div>
                <button type="button" class="btn btn-success" id="newNav">添加用户</button>&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button>
            </div>
        </th>
    </tr>
  </table>
</body>
</html>
<script>
    //页面加载完毕之后发送异步请求
    $(function(){
        loadData();
        alert("测试111")
    });

    //填充分页信息
    function fillPageData(pageInfo) {
        //填充信息
        $("#total").html(pageInfo.total);  //总条数  已经设置
        $("#pages").html(pageInfo.pages); // 共几页 已经设置
        $("#pageNum").html(pageInfo.pageNum); //当前页码  已经设置
        //$("input[name='pageNum']").val(pageInfo.pageNum);
        $("select[name='pageSize']").val(pageInfo.pageSize); //pageSize
        //设置按钮的属性值和样式
        $("#firstPage").attr("name",1);
        $("#prePage").attr("name",pageInfo.prePage);
        $("#nextPage").attr("name",pageInfo.nextPage);
        $("#lastPage").attr("name",pageInfo.pages);
        $("#firstPage").removeClass("disabled");
        $("#prePage").removeClass("disabled");
        $("#nextPage").removeClass("disabled");
        $("#lastPage").removeClass("disabled");
        if(pageInfo.isFirstPage){//如果是第一页：上一页和首页禁用
            $("#firstPage").addClass("disabled");
            $("#prePage").addClass("disabled");
        }
        if(pageInfo.isLastPage){//如果已经是最后一页：下一页和末页禁用
            $("#nextPage").addClass("disabled");
            $("#lastPage").addClass("disabled");
        }
    }


    function loadData(){
        $.ajax({
            type: "GET",
            url: "/getList",
            //data: $("#myForm").serialize(),//主要是分页和多条件参数数据
            dataType:"json",
            success: function(vo){
                alert( "Data Saved: " + vo );
                let list=vo.pageInfo.list;
                let str="";
                for(let i=0;i<list.length;i++){
                    let obj=list[i];
                    let uId =obj.uId;
                    let uLoginname = obj.uLoginname;
                    let uPassword = obj.uPassword;
                    let uTruename =obj.uTruename;
                    let uEmail = obj.uEmail;
                    let uState = obj.uState=='0'?'启用':'禁用';
                    let rId=obj.rId=='1'?'大管理':'群主';
                    let btnStr="<a href=\"editUser.html\">编辑</a>&nbsp;&nbsp;&nbsp;<a href=\"javascript:alert('删除成功！');\">删除</a>";
                    str+='<tr>' +

                        '            <td><input type="checkbox"/></td>' +
                        '            <td>'+uLoginname+'</td>' +
                        '            <td>'+uTruename+'</td>' +
                        '            <td>'+rId+'</td>' +
                        '            <td>'+btnStr+'</td>' +
                        '</tr>'
                }
                $("#tboby").html(str);
                //填充分页数据
                fillPageData(vo.pageInfo);
            }
        });
    }
</script>
